<template>
	<view class="page-content">
		<view class="page-header-body">
			<image src="https://quanyuzhou.weimoft.com/image/service_heaeder.png" mode="widthFix" class="page-header-img">
			</image>
			<view class="page-header">
				服务介绍
			</view>
			<view class="page-header-text">
				<view class="text-bold">
					产品名称
				</view>
				<view class="text">
					专业科学的医疗平台
				</view>
			</view>
		</view>
		<view class="page-main">
			<view class="items">
				<view class="item" @click="handleToInfo(item)" v-for="(item,index) in categorys" :key="index">
					<image :src="`https://quanyuzhou.weimoft.com/${item.image}`" mode="widthFix"></image>
					<view class="text">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<diy-bottom-nav></diy-bottom-nav>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categorys: [],
				card_id: null,
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				headerImages: [],
				is_activation: 0,
				is_booking: 0,

			}
		},
		onLoad(options) {
			let ids = options.scene;
			if (ids) {
				ids = ids.split('-');
				console.log(ids)
				this.card_id = ids[1];
				uni.setStorageSync("is_code_sence", ids[1])
			} else {
				uni.setStorageSync("is_code_sence", null)
			}

		},
		mounted() {
			this.getCategorys();
			let token = uni.getStorageSync('token')
			if (token == null & token == '') {
				uni.showToast({
					icon: "none",
					title: "你还未登录，请前往登录后使用"
				})
			}
			// this.handlegetDeite()
		},
		methods: {
			handlegetDeite() {
				// /bookingcard/api/card/category_detail?id=5
				let _this = this;
				this.$api.sendRequest({
					url: "/bookingcard/api/card/category_detail?id=" + _this.card_id,
					success(res) {
						console.log(res)
						if (res.code == 0) {
							_this.headerImages = res.data.images;
							_this.is_activation = res.data.is_activation;
							_this.is_booking = res.data.is_booking;
						}
					}
				})
			},
			handleToInfo(item) {
				let url = item.url;
				if (url == null || url == '') {
					uni.navigateTo({
						url: `/pages_service/service/index/legalinterest?is_scode=${this.card_id}&card_id=${item.id}`
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
				// is_booking=1 ==1 按钮变成立即预约
				// is_booking=1 ==0 按钮变成立即激活
				//is_activation ==1  card_id !==null  =>>>  可以激活
				//is_activation ==0  card_id !==null  =>>>  不可以激活
				//is_activation ==0  card_id == null  =>>>  可以激活

			},
			getCategorys() {
				let _this = this;
				this.$api.sendRequest({
					url: "/bookingcard/api/card/category",
					success: res => {
						let data = res.data;
						_this.categorys = data;
					},
					fail: err => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style>
</style>
<style lang="less">
	.page-content {
		position: relative;
		width: 100vw;
		overflow: hidden;

		.page-header-img {
			width: 100%;
		}

		.page-header {
			position: absolute;
			left: 0;
			width: 100%;
			top: 45px;
			font-size: 17px;
			font-weight: 500;
			color: #fff;
			text-align: center;
			height: 33px;
			line-height: 33px;
			padding: 8px 17px;
		}

		.page-header-text {
			position: absolute;
			top: 106px;
			padding: 0 37rpx;

			.text-bold {
				font-weight: bold;
				color: #FFFFFF;
				font-size: 60rpx;
				text-shadow: 0px 4px 12px rgba(9, 97, 94, 0.78);
				text-align: left;
				line-height: 90rpx;
			}

			.text {
				font-size: 55rpx;
				font-weight: 500;
				text-shadow: 0px 3px 10px #1B7874;
				line-height: 56rpx;
				color: #FFFFFF;
			}
		}
	}

	.page-main {
		padding: 42rpx 32rpx;

		.items {
			display: flex;
			margin-left: -15rpx;
			margin-right: -15rpx;
			flex-wrap: wrap;
			box-sizing: border-box;
			position: relative;

			.item {
				padding: 15rpx;
				width: 50%;
				box-sizing: border-box;
				position: relative;

				image {
					width: 100%;
					border-radius: 20rpx;
				}

				.text {
					position: absolute;
					left: 40rpx;
					top: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #000000;
					line-height: 32rpx;
				}
			}
		}
	}
</style>